<template>
  <div>
    <!-- <div class="bgc-color test">1111</div> -->
    <!-- <icon-svg icon-class="heart" width="50px" height="50" />
      <icon-svg icon-class="shit" width="50px" height="50" />
      <icon-svg icon-class="nausea" width="50px" height="50" />
      <icon-svg icon-class="fireworks" width="50px" height="50" />
      <icon-svg icon-class="sheep" width="50px" height="50" /> -->

    <el-carousel :interval="4000" type="card" height="200px">
      <el-carousel-item v-for="(item, index) in cards" :key="index">
        <img :src="item.url" style="width: 100%; height: 100%" />
      </el-carousel-item>
    </el-carousel>

    <div id="main" style="width: 300px; height: 300px"></div>
  </div>
</template>
  
  <script>
import { getChartData } from "@/api";
const echarts = require("echarts");
export default {
  data() {
    return {
      cards: [
        {
          url: "https://ts1.cn.mm.bing.net/th/id/R-C.0a61ecf7af6eb4d3d6897bbda8652137?rik=EMq9%2bR5yGxtxqw&riu=http%3a%2f%2fwww.ychedu.com%2fCRJY%2fUploadSoftPic%2f202108%2f2021082022233728.jpg&ehk=bY2LW1ZG81chXzJU9t%2fHlbOTv0Kkx%2bxHWnfjz8Up5fk%3d&risl=&pid=ImgRaw&r=0",
        },
        {
          url: "https://ts1.cn.mm.bing.net/th/id/R-C.316a6749c5b8b5bbdc27528d34cefe67?rik=mAiCAZD9i73Ecw&riu=http%3a%2f%2fe0.ifengimg.com%2f12%2f2019%2f0317%2fBE7559BF2C9DDEC8878B074B3688D9243E05F063_size36_w576_h391.jpeg&ehk=mDTVw7WngEN1m7PDG9YaQMJ5Y2qgcTO7gM%2bN7grgLLM%3d&risl=&pid=ImgRaw&r=0",
        },
        {
          url: "https://pica.zhimg.com/v2-7e972724aacd379b2016e427acb16762_720w.jpg?source=172ae18b",
        },
        {
          url: "https://pic3.zhimg.com/v2-148ea0467376512d122c6595b6ab406b_r.jpg?source=1940ef5c",
        },
        {
          url: "https://console.letschuhai.com/wp-content/uploads/2021/11/1636326613-s3.png",
        },
        {
          url: "https://tse4-mm.cn.bing.net/th/id/OIP-C.N2nY3b2C6thoWXvgI59o8wHaEo?rs=1&pid=ImgDetMain",
        },
      ],
      xdata: [],
      ydata: [],
    };
  },
  methods: {
    initChart() {
      var myChart = echarts.init(document.getElementById("main"));
      // 绘制图表
      myChart.setOption({
        title: {
          text: "书籍分类",
        },
        tooltip: {},
        xAxis: {
          data: this.xdata,
        },
        yAxis: {},
        series: [
          {
            name: "数量",
            type: "bar",
            data: this.ydata,
            barWidth: "30%",
          },
        ],
      });
    },
  },
  async mounted() {
    let { data } = await getChartData();
    this.xdata = data.map((item) => item.name);
    this.ydata = data.map((item) => item.total);
    this.initChart();
  },
};
</script>
  
  <style lang="scss" scoped>
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.statistics {
  background: #fff;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.test {
  width: $min-width;
}
</style>